<template>
  <div class="wrapper">
    这是子组件<br/>
    <!-- 1. 使用字符串的形式接收父组件传递的值 -->
    <!-- 父传子：{{ props.msg }} {{ props.foo }} -->

    <!-- 2. 使用对象的形式接收父组件传递的值 -->
    <!-- 父传子：{{ props.msg }} {{ props.foo }} -->

    <!-- 3. 使用对象的形式接收父组件传递的值(含默认值及必填参数设置) -->
    <!-- 父传子：{{ props.msg }} {{ props.foo }} -->

    <!-- 4. 结合 TypeScript 使用 -->
    <!-- 父传子：{{ props.msg }} {{ props.foo }} -->

    <!-- 5. 点击给父组件传值 -->
    <button @click="emitToParent">click</button>
  </div>
</template>

<script setup lang="ts">
// 1. 使用字符串的形式接收父组件传递的值
// let props = defineProps(['msg', 'foo'])

// 2. 使用对象的形式接收父组件传递的值
// let props = defineProps({
//   msg: String,
//   foo: Number
// })

// 3. 使用对象的形式(含默认值及必填参数设置)
// let props = defineProps({
//   msg: {
//     type: String,
//     default: '',
//     required: true // 设置后参数为必填
//   },
//   foo: {
//     type: Number,
//     default: 0
//   }
// })

// 4. 结合 TypeScript 使用
// let props = defineProps<{
//   msg?: string;
//   foo: number
// }>()

// 5. 子组件给父组件传值
let emit = defineEmits(['event-to-parent'])
let emitToParent = () => {
  emit('event-to-parent', '子组件传递给父组件的值')
}

</script>

<style scoped>

</style>